<template>
  <el-dialog
    class="gyc-dialog"
    title="设置列"
    :visible.sync="setVisibleModel"
    :width="setWidth()"
    center
    append-to-body
    @close="closeWindow()"
    v-dragH
    v-dragW
    v-dragM
  >
    <div style="display: flex; justify-content: center">
      <div class="gyc-check-style" style="align-items: flex-start">
        <div style="margin: 10px">
          <a @click="selectAll">全选</a>
          <el-divider direction="vertical"></el-divider>
          <a @click="clearAll">全不选</a>
          <el-divider direction="vertical"></el-divider>
          <a @click="rowReset">复位</a>
        </div>
        <el-alert
          title="拖动表格列标题可以改变表格列显示顺序 !"
          type="warning"
          show-icon
          :closable="false"
          style="margin-bottom: 10px"
        >
        </el-alert>
        <el-checkbox-group v-model="checkList" id="cols" @change="setdisable">
          <el-checkbox
            class="gyc-check"
            style="width: 105px"
            :label="check.title"
            :value="check.key"
            :title="check.title"
            :disabled="check.alwaysShow"
            v-for="(check, index) in arrKeys"
            :key="index + Math.random()"
          >
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div>
      <div class="lockstyle">
        <div class="lockstyle-left">
          <label> 锁左边</label>
          <el-select
            style="width: 70px; margin: 5px"
            v-model="lock"
            placeholder="请选择"
            @change="lockLeft"
          >
            <el-option
              v-for="item in [0, 1, 2, 3, 4, 5]"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <label for="">列</label>
        </div>
        <div class="lockstyle-right" v-if="showRight">
          <label for="syb" style="margin-left: 30px"> 锁右边</label>
          <el-checkbox
            v-model="checked"
            @change="lockRight"
            id="syb"
            style="margin: 5px 5px 5px 5px"
          ></el-checkbox>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Sortable from "sortablejs";
import dragM from "../directive/dialog/drag.js";
import dragW from "../directive/dialog/dragWidth.js";
import dragH from "../directive/dialog/dragHeight.js";
export default {
  name: "com-set",
  directives: {
    dragW: dragW,
    dragH: dragH,
    dragM: dragM,
  },
  props: {
    "col-keys": {
      type: Array,
      default: () => [],
    },
    "set-width": {
      type: Function,
      default: () => "584px",
    },
    "show-right": {
      type: Boolean,
      default: () => true,
    },
  },
  data() {
    return {
      setVisibleModel: true,
      arrKeys: [], // this.colKeys,
      checkList: [],
      lock: 0,
      checked: false,
    };
  },
  methods: {
    //拖拽列
    rowDrop() {
      this.$nextTick(() => {
        let c = document.getElementById("cols");
        Sortable.create(c, {
          animation: 150,
          sort: true,
          onEnd: ({ oldIndex, newIndex }) => {
            const o = this.arrKeys.splice(oldIndex, 1)[0];
            this.arrKeys.splice(newIndex, 0, o);
            this.$emit("set-drag", this.arrKeys);
          },
        });
      });
    },
    //关窗
    closeWindow() {
      this.$emit(
        "close",
        this.arrKeys.map((a) => a.key)
      );
    },
    //设置列
    setdisable(val) {
      this.$emit("set-col-val", val);
    },
    //全选列
    selectAll() {
      this.checkList = this.arrKeys.map((a) => a.title);
      this.$emit("set-col-val", this.checkList);
    },
    //清除列
    clearAll() {
      this.checkList = this.arrKeys
        .filter((a) => a.alwaysShow === true)
        .map((a) => a.title);
      this.$emit("set-col-val", this.checkList);
    },
    //锁右边
    lockRight(val) {
      this.$emit("lock-right", val);
    },
    //锁左边
    lockLeft(val) {
      this.$emit("lock-left", val);
    },
    rowReset() {
      this.$emit("row-reset");
    },
    //加载所有数据
    load() {
      this.$emit("set-load", (keys, list, locknum, checked) => {
        this.arrKeys = keys;
        this.checkList = list;
        this.lock = locknum;
        this.checked = checked;
      });
    },
  },
  mounted() {
    this.rowDrop();
    this.load();
  },
};
</script>

<style lang="css" scoped>
a {
  cursor: pointer;
  font-weight: bold;
  color: #6d6c6c;
}

a:hover {
  color: #409eff;
}
</style>
<style>
.gyc-check-style {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gyc-check-style .el-checkbox__label {
  display: inline-block;
  padding-left: 10px;
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 80px;
  height: 30px;
  line-height: 30px;
}

.gyc-check-style .el-checkbox__input {
  cursor: pointer;
  outline: 0;
  vertical-align: middle;
  display: inline-flex;
}

.gyc-check {
  width: 115px !important;
  height: 30px !important;
  border: 1px solid #dfe6ec;
  margin: 5px !important;
  border-radius: 2px !important;
  padding-left: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.gyc-check:hover {
  background: #f5f1f1;
  border-radius: 2px;
}

.gyc-dialog .el-dialog__headerbtn {
  top: 10px;
}

.lockstyle {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px;
}

.lockstyle-left {
  display: flex;
  width: 50%;
  align-items: center;
}

.lockstyle-right {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  margin-right: 20px;
}
</style>